#why is flexbox | Explore Tumblr posts and blogs

jcmarchi · 5 months ago

Text

Revisiting CSS Multi-Column Layout

New Post has been published on https://thedigitalinsider.com/revisiting-css-multi-column-layout/

Revisiting CSS Multi-Column Layout

Honestly, it’s difficult for me to come to terms with, but almost 20 years have passed since I wrote my first book, Transcending CSS. In it, I explained how and why to use what was the then-emerging Multi-Column Layout module.

Hint: I published an updated version, Transcending CSS Revisited, which is free to read online.

Perhaps because, before the web, I’d worked in print, I was over-excited at the prospect of dividing content into columns without needing extra markup purely there for presentation. I’ve used Multi-Column Layout regularly ever since. Yet, CSS Columns remains one of the most underused CSS layout tools. I wonder why that is?

Holes in the specification

For a long time, there were, and still are, plenty of holes in Multi-Column Layout. As Rachel Andrew — now a specification editor — noted in her article five years ago:

“The column boxes created when you use one of the column properties can’t be targeted. You can’t address them with JavaScript, nor can you style an individual box to give it a background colour or adjust the padding and margins. All of the column boxes will be the same size. The only thing you can do is add a rule between columns.”

She’s right. And that’s still true. You can’t style columns, for example, by alternating background colours using some sort of :nth-column() pseudo-class selector. You can add a column-rule between columns using border-style values like dashed, dotted, and solid, and who can forget those evergreen groove and ridge styles? But you can’t apply border-image values to a column-rule, which seems odd as they were introduced at roughly the same time. The Multi-Column Layout is imperfect, and there’s plenty I wish it could do in the future, but that doesn’t explain why most people ignore what it can do today.

Patchy browser implementation for a long time

Legacy browsers simply ignored the column properties they couldn’t process. But, when Multi-Column Layout was first launched, most designers and developers had yet to accept that websites needn’t look the same in every browser.

Early on, support for Multi-Column Layout was patchy. However, browsers caught up over time, and although there are still discrepancies — especially in controlling content breaks — Multi-Column Layout has now been implemented widely. Yet, for some reason, many designers and developers I speak to feel that CSS Columns remain broken. Yes, there’s plenty that browser makers should do to improve their implementations, but that shouldn’t prevent people from using the solid parts today.

Readability and usability with scrolling

Maybe the main reason designers and developers haven’t embraced Multi-Column Layout as they have CSS Grid and Flexbox isn’t in the specification or its implementation but in its usability. Rachel pointed this out in her article:

“One reason we don’t see multicol used much on the web is that it would be very easy to end up with a reading experience which made the reader scroll in the block dimension. That would mean scrolling up and down vertically for those of us using English or another vertical writing mode. This is not a good reading experience!”

That’s true. No one would enjoy repeatedly scrolling up and down to read a long passage of content set in columns. She went on:

“Neither of these things is ideal, and using multicol on the web is something we need to think about very carefully in terms of the amount of content we might be aiming to flow into our columns.”

But, let’s face it, thinking very carefully is what designers and developers should always be doing.

Sure, if you’re dumb enough to dump a large amount of content into columns without thinking about its design, you’ll end up serving readers a poor experience. But why would you do that when headlines, images, and quotes can span columns and reset the column flow, instantly improving readability? Add to that container queries and newer unit values for text sizing, and there really isn’t a reason to avoid using Multi-Column Layout any longer.

A brief refresher on properties and values

Let’s run through a refresher. There are two ways to flow content into multiple columns; first, by defining the number of columns you need using the column-count property:

Second, and often best, is specifying the column width, leaving a browser to decide how many columns will fit along the inline axis. For example, I’m using column-width to specify that my columns are over 18rem. A browser creates as many 18rem columns as possible to fit and then shares any remaining space between them.

Then, there is the gutter (or column-gap) between columns, which you can specify using any length unit. I prefer using rem units to maintain the gutters’ relationship to the text size, but if your gutters need to be 1em, you can leave this out, as that’s a browser’s default gap.

The final column property is that divider (or column-rule) to the gutters, which adds visual separation between columns. Again, you can set a thickness and use border-style values like dashed, dotted, and solid.

These examples will be seen whenever you encounter a Multi-Column Layout tutorial, including CSS-Tricks’ own Almanac. The Multi-Column Layout syntax is one of the simplest in the suite of CSS layout tools, which is another reason why there are few reasons not to use it.

Multi-Column Layout is even more relevant today

When I wrote Transcending CSS and first explained the emerging Multi-Column Layout, there were no rem or viewport units, no :has() or other advanced selectors, no container queries, and no routine use of media queries because responsive design hadn’t been invented.

We didn’t have calc() or clamp() for adjusting text sizes, and there was no CSS Grid or Flexible Box Layout for precise control over a layout. Now we do, and all these properties help to make Multi-Column Layout even more relevant today.

Now, you can use rem or viewport units combined with calc() and clamp() to adapt the text size inside CSS Columns. You can use :has() to specify when columns are created, depending on the type of content they contain. Or you might use container queries to implement several columns only when a container is large enough to display them. Of course, you can also combine a Multi-Column Layout with CSS Grid or Flexible Box Layout for even more imaginative layout designs.

Using Multi-Column Layout today

Patty Meltt is an up-and-coming country music sensation. She’s not real, but the challenges of designing and developing websites like hers are.

My challenge was to implement a flexible article layout without media queries which adapts not only to screen size but also whether or not a <figure> is present. To improve the readability of running text in what would potentially be too-long lines, it should be set in columns to narrow the measure. And, as a final touch, the text size should adapt to the width of the container, not the viewport.

Article with no <figure> element. What would potentially be too-long lines of text are set in columns to improve readability by narrowing the measure.

Article containing a <figure> element. No column text is needed for this narrower measure.

The HTML for this layout is rudimentary. One <section>, one <main>, and one <figure> (or not:)

<section> <main> <h1>About Patty</h1> <p>…</p> </main> <figure> <img> </figure> </section>

I started by adding Multi-Column Layout styles to the <main> element using the column-width property to set the width of each column to 40ch (characters). The max-width and automatic inline margins reduce the content width and center it in the viewport:

main margin-inline: auto; max-width: 100ch; column-width: 40ch; column-gap: 3rem; column-rule: .5px solid #98838F;

Next, I applied a flexible box layout to the <section> only if it :has() a direct descendant which is a <figure>:

section:has(> figure) display: flex; flex-wrap: wrap; gap: 0 3rem;

This next min-width: min(100%, 30rem) — applied to both the <main> and <figure> — is a combination of the min-width property and the min() CSS function. The min() function allows you to specify two or more values, and a browser will choose the smallest value from them. This is incredibly useful for responsive layouts where you want to control the size of an element based on different conditions:

section:has(> figure) main flex: 1; margin-inline: 0; min-width: min(100%, 30rem); section:has(> figure) figure flex: 4; min-width: min(100%, 30rem);

What’s efficient about this implementation is that Multi-Column Layout styles are applied throughout, with no need for media queries to switch them on or off.

Adjusting text size in relation to column width helps improve readability. This has only recently become easy to implement with the introduction of container queries, their associated values including cqi, cqw, cqmin, and cqmax. And the clamp() function. Fortunately, you don’t have to work out these text sizes manually as ClearLeft’s Utopia will do the job for you.

My headlines and paragraph sizes are clamped to their minimum and maximum rem sizes and between them text is fluid depending on their container’s inline size:

h1 font-size: clamp(5.6526rem, 5.4068rem + 1.2288cqi, 6.3592rem); h2 font-size: clamp(1.9994rem, 1.9125rem + 0.4347cqi, 2.2493rem); p font-size: clamp(1rem, 0.9565rem + 0.2174cqi, 1.125rem);

So, to specify the <main> as the container on which those text sizes are based, I applied a container query for its inline size:

main container-type: inline-size;

Open the final result in a desktop browser, when you’re in front of one. It’s a flexible article layout without media queries which adapts to screen size and the presence of a <figure>. Multi-Column Layout sets text in columns to narrow the measure and the text size adapts to the width of its container, not the viewport.

Modern CSS is solving many prior problems

Structure content with spanning elements which will restart the flow of columns and prevent people from scrolling long distances.

Prevent figures from dividing their images and captions between columns.

Almost every article I’ve ever read about Multi-Column Layout focuses on its flaws, especially usability. CSS-Tricks’ own Geoff Graham even mentioned the scrolling up and down issue when he asked, “When Do You Use CSS Columns?”

“But an entire long-form article split into columns? I love it in newspapers but am hesitant to scroll down a webpage to read one column, only to scroll back up to do it again.”

Fortunately, the column-span property — which enables headlines, images, and quotes to span columns, resets the column flow, and instantly improves readability — now has solid support in browsers:

h1, h2, blockquote column-span: all;

But the solution to the scrolling up and down issue isn’t purely technical. It also requires content design. This means that content creators and designers must think carefully about the frequency and type of spanning elements, dividing a Multi-Column Layout into shallower sections, reducing the need to scroll and improving someone’s reading experience.

Another prior problem was preventing headlines from becoming detached from their content and figures, dividing their images and captions between columns. Thankfully, the break-after property now also has widespread support, so orphaned images and captions are now a thing of the past:

figure break-after: column;

Open this final example in a desktop browser:

You should take a fresh look at Multi-Column Layout

Multi-Column Layout isn’t a shiny new tool. In fact, it remains one of the most underused layout tools in CSS. It’s had, and still has, plenty of problems, but they haven’t reduced its usefulness or its ability to add an extra level of refinement to a product or website’s design. Whether you haven’t used Multi-Column Layout in a while or maybe have never tried it, now’s the time to take a fresh look at Multi-Column Layout.

2 notes · View notes

izicodes · 2 years ago

Text

Revamp Old Webpages | #2

Tuesday 17th October 2023

Continuing from yesterday's post on the project, I've working on old website #2 which is called 'Beta-Peach-Brown-Login-Form' or 'Beta' for short! There wasn't too much to change on her (yes all of my projects are girls) visually but just sorted some code structuring! Again, didn't want to change the visuals of the old projects too much as it's lowkey nostalgic to me~!

Also want to highlight what @indigotech mentioned that it is important to go over old projects so see how far we've come. That's why it's important to build as many projects as we can!

Link to project: live page | github repo ♡

🛠️ Issues

✘ switched the positioning method to the flex method to center the form in the middle of the page ✘ click the login button and error appears - attributes to the form tag

🏆 Fixes

✔ Added flexbox in ✔ Added required to the input elements ✔ Responsive on other devices ✔ Added the colours in a :root so no repeat of colour codes

⤷ ♡ my shop ○ my mini website ○ pinned ○ navigation ♡

#xc: project logs #revamp old websites project #codeblr #coding #progblr #programming #studyblr #studying #computer science #tech #dev logs #comp sci #programmer #devlogs

17 notes · View notes

hob28 · 11 months ago

Text

Learn HTML and CSS: A Comprehensive Guide for Beginners

Introduction to HTML and CSS

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the core technologies for creating web pages. HTML provides the structure of the page, while CSS defines its style and layout. This guide aims to equip beginners with the essential knowledge to start building and designing web pages.

Why Learn HTML and CSS?

HTML and CSS are fundamental skills for web development. Whether you're looking to create personal websites, start a career in web development, or enhance your current skill set, understanding these technologies is crucial. They form the basis for more advanced languages and frameworks like JavaScript, React, and Angular.

Getting Started with HTML and CSS

To get started, you need a text editor and a web browser. Popular text editors include Visual Studio Code, Sublime Text, and Atom. Browsers like Google Chrome, Firefox, and Safari are excellent for viewing and testing your web pages.

Basic HTML Structure

HTML documents have a basic structure composed of various elements and tags. Here’s a simple example:

html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome to My Web Page</h1>

<p>This is a paragraph of text on my web page.</p>

</body>

</html>

: Declares the document type and HTML version.

: The root element of an HTML page.

: Contains meta-information about the document.

: Connects the HTML to an external CSS file.

: Contains the content of the web page.

Essential HTML Tags

HTML uses various tags to define different parts of a web page:

to : Headings of different levels.

: Paragraph of text.

: Anchor tag for hyperlinks.

: Embeds images.

: Defines divisions or sections.

: Inline container for text.

Creating Your First HTML Page

Follow these steps to create a simple HTML page:

Open your text editor.

Write the basic HTML structure as shown above.

Add a heading with the tag.

Add a paragraph with the tag.

Save the file with a .html extension (e.g., index.html).

Open the file in your web browser to view your web page.

Introduction to CSS

CSS is used to style and layout HTML elements. It can be included within the HTML file using the <style> tag or in a separate .css file linked with the <link> tag.

Basic CSS Syntax

CSS consists of selectors and declarations. Here’s an example:

css

Copy code

h1 {

color: blue;

font-size: 24px;

}

Selector (h1): Specifies the HTML element to be styled.

Declaration Block: Contains one or more declarations, each consisting of a property and a value.

Styling HTML with CSS

To style your HTML elements, you can use different selectors:

Element Selector: Styles all instances of an element.

Class Selector: Styles elements with a specific class.

ID Selector: Styles a single element with a specific ID.

Example:

html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Styled Page</title>

</head>

<body>

<h1 class="main-heading">Hello, World!</h1>

<p id="intro">This is an introduction paragraph.</p>

</body>

</html>

In the styles.css file:

css

Copy code

.main-heading {

color: green;

text-align: center;

}

#intro {

font-size: 18px;

color: grey;

}

CSS Layout Techniques

CSS provides several layout techniques to design complex web pages:

Box Model: Defines the structure of an element’s content, padding, border, and margin.

Flexbox: A layout model for arranging items within a container, making it easier to design flexible responsive layouts.

Grid Layout: A two-dimensional layout system for more complex layouts.

Example of Flexbox:

css

Copy code

.container {

display: flex;

justify-content: space-around;

}

.item {

width: 100px;

height: 100px;

background-color: lightblue;

}

Best Practices for Writing HTML and CSS

Semantic HTML: Use HTML tags that describe their meaning clearly (e.g., , , ).

Clean Code: Indent nested elements and use comments for better readability.

Validation: Use tools like the W3C Markup Validation Service to ensure your HTML and CSS are error-free and standards-compliant.

Accessibility: Make sure your website is accessible to all users, including those with disabilities, by using proper HTML tags and attributes.

Free Resources to Learn HTML and CSS

W3Schools: Comprehensive tutorials and references.

MDN Web Docs: Detailed documentation and guides for HTML, CSS, and JavaScript.

Codecademy: Interactive courses on web development.

FreeCodeCamp: Extensive curriculum covering HTML, CSS, and more.

Khan Academy: Lessons on computer programming and web development.

FAQs about Learning HTML and CSS

Q: What is HTML and CSS? A: HTML (HyperText Markup Language) structures web pages, while CSS (Cascading Style Sheets) styles and layouts the web pages.

Q: Why should I learn HTML and CSS? A: Learning HTML and CSS is essential for creating websites, understanding web development frameworks, and progressing to more advanced programming languages.

Q: Do I need prior experience to learn HTML and CSS? A: No prior experience is required. HTML and CSS are beginner-friendly and easy to learn.

Q: How long does it take to learn HTML and CSS? A: The time varies depending on your learning pace. With consistent practice, you can grasp the basics in a few weeks.

Q: Can I create a website using only HTML and CSS? A: Yes, you can create a basic website. For more complex functionality, you'll need to learn JavaScript.

Q: What tools do I need to start learning HTML and CSS? A: You need a text editor (e.g., Visual Studio Code, Sublime Text) and a web browser (e.g., Google Chrome, Firefox).

Q: Are there free resources available to learn HTML and CSS? A: Yes, there are many free resources available online, including W3Schools, MDN Web Docs, Codecademy, FreeCodeCamp, and Khan Academy.

#how to learn html and css #html & css course #html & css tutorial #html and css #html course #html css tutorial #html learn #html learn website #learn html #learn html and css #html and css course #html and css full course #html and css online course #how to learn html and css for beginners

3 notes · View notes

xumoonhao · 11 months ago

Text

heh, just added some lines to a javascript and it didnt break :3c also!!! found a js that maximizes in the browser window!!! it wont resize back to its original size but im trying to figure out how to fix that rn...also still trying to find out how to make my window resizable w/o having to do flexbox bc i have to be real with you...flexbox is the Ugliest and Dumbest way to make a code. its worse than grid and i HATE grid =_= like dont me wrong, i get why ppl use them and i understand it makes sites more accessible, but its just doesnt feel necessary for my code. like its HONESTLY the last resort for me :/

#and like i dont need this layout to be accessible since its resizable. it Is accessible for larger/smaller screens already #like. thats the benefit of resizable #🎆.txt

2 notes · View notes

holyscream · 2 years ago

Text

That voice inside your head that says, “Hey, you should write an AO3 skin that fully replaces the default. It will be fun :D”?

Yeah, that’s the devil talking.

I don’t want to know how long I spent on this, even excluding the year-long break where I gave up after realizing I couldn’t use flexbox, grid, or calc. The only reason why I decided to finish it this week was because I forgot that was the case and then I was too stubborn to stop.

Oh, and you bet it’s responsive. Well, responsive in the way that AO3 allows you two breakpoints and no custom media-queries.

It needs a bit more tweaking in some places, but for the sake of my own sanity I want to say that version 1.0 of this skin is finished now.

#the great whine shark #hobbyscream #fanfic stuff #theme stuff #sort of #id in alt text #this was an awful idea. do not do this #i am goign to pass away

4 notes · View notes

myhuman · 2 years ago

Text

CAN SOMEONE TELL ME WHY IT'S LIKE FLEXBOX WANTS ME TO KILL MYSELF. CAN IT FUCKING CHANGE WIDTH ALREADY

2 notes · View notes

mournstera · 2 years ago

Note

line-height anon! sorry for disturbing, but could you explain (if you don’t mind) why i couldn’t add “line-height” under the CSS class(? identifier??) “.tags”? it already has some properties like height above the tag and font-weight, so it boggles my mind a little when adding line-height did nothing but break the code.

I use flexbox to "hold the tags" and a "gap: 20px;" to keep spacing/margins between the tags. it would only affect the tags container itself. You need to target the links inside the tag container 😊

#ask #Anonymous

1 note · View note

freelance-blogger · 3 hours ago

Text

Freelance Web Development Courses: Kickstart Your Career

The world of freelance web development is rapidly expanding. With more businesses going digital, the demand for skilled Freelance Web Designers and Freelance Web Developers has never been higher. Whether you're looking to become a Freelance Website Designer Singapore or upgrade your current skills, taking the right web development courses is a crucial step toward success.

This article explores the best freelance web development courses available, both free and paid, while helping you understand how they align with your goals as a Web Developer Singapore, Freelance Website Developer, or Website Designer Singapore.

Why Courses Matter in Freelance Web Development

The freelance industry values both experience and knowledge. Even if you're self-taught, completing recognized courses can help you stay competitive and earn client trust. If you aim to work in a competitive market like web design Singapore, certifications and formal training can give you an edge.

For a Freelance Web Designer Singapore, courses can improve not only technical skills but also soft skills such as client communication and time management.

1. freeCodeCamp – Responsive Web Design Certification

freeCodeCamp offers a highly regarded free certification in Responsive Web Design. This course covers HTML, CSS, Flexbox, Grid, and responsive design principles.

It’s ideal for a beginner Freelance Web Developer or someone looking to break into the Freelance Website Developer Singapore market. You’ll build real projects that can go into your portfolio.

2. Coursera – Meta Front-End Developer Professional Certificate

Meta (formerly Facebook) offers this comprehensive program on Coursera. It includes HTML, CSS, JavaScript, React, and even UI/UX design concepts. You also get a certificate from Meta.

This course is excellent for aspiring Website Developer Singapore professionals aiming to work in front-end development.

It’s a high-value credential for any Freelance Web Designer Singapore wanting to gain global recognition.

3. Google UX Design Professional Certificate (Coursera)

This course focuses on user experience design, research, and prototyping tools like Figma. It's perfect for Freelance Website Designers who want to understand the psychology and strategy behind beautiful, functional websites.

In markets like Singapore, where design standards are high, understanding UX can set a Freelance Website Developer Singapore apart from the competition.

4. Udemy – The Web Developer Bootcamp (by Colt Steele)

This is one of the most popular and comprehensive courses on Udemy. It includes HTML, CSS, JavaScript, Node.js, MongoDB, and Express. It’s ideal for those who want to become full-stack developers.

Whether you’re a Freelance Web Developer Singapore or a Website Designer Singapore, this course offers end-to-end web development skills.

The lifetime access and frequent updates make it a great long-term investment.

5. edX – W3C Front-End Web Developer Program

Developed by the World Wide Web Consortium (W3C), this course on edX teaches web standards and technologies like HTML5, CSS, and JavaScript.

This course is great for beginners as well as experienced Web Designers Singapore who want to polish their fundamentals and earn a globally respected certificate.

6. LinkedIn Learning – Become a Web Developer Learning Path

LinkedIn Learning offers curated course bundles that cover everything from the basics to advanced topics like API integration and server-side scripting.

It’s perfect for a Freelance Web Developer, and completing these courses can also enhance your LinkedIn profile—useful for networking with potential clients in web design Singapore.

7. General Assembly – Web Development Immersive

General Assembly offers intensive bootcamps in cities worldwide, including Singapore. Their full-time and part-time web development courses cover HTML, CSS, JavaScript, Git, and frameworks like React and Angular.

Perfect for those looking to transition into a full-time freelance career, whether as a Freelance Web Developer Singapore or a Website Developer Singapore.

8. The Odin Project

The Odin Project is a free and comprehensive curriculum that covers full-stack development using HTML, CSS, JavaScript, Node.js, and databases.

It’s excellent for someone who wants to become a self-taught Freelance Website Developer. You'll build real-world projects—great for your portfolio if you want to offer web design Singapore services.

9. Skillshare – Web Design and Freelance Courses

Skillshare offers shorter, project-based courses in web design, UI/UX, and freelancing. While not as in-depth as bootcamps, they’re perfect for learning specific skills quickly.

A Freelance Web Designer Singapore or Website Designer Singapore looking to sharpen a particular skill like typography, wireframing, or branding can benefit greatly.

10. Pluralsight – Paths for Front-End and Back-End Developers

Pluralsight offers expert-led, structured learning paths in various web technologies. Their assessments help you gauge your current skill level, making it ideal for intermediate and advanced developers.

It's a solid option for Freelance Website Developer Singapore professionals who want continuous learning.

What to Look for in a Web Development Course

Choosing the right course depends on your career goals. Here are a few factors to consider:

1. Course Content

Make sure it covers both front-end and back-end if you're aiming to be a full-stack Freelance Website Developer.

2. Hands-on Projects

Courses that include real-world projects are more valuable, especially for building your portfolio as a Freelance Web Designer Singapore.

3. Certifications

While not always mandatory, certificates can enhance your credibility, especially if you're just starting out in web design Singapore.

4. Community Support

A good learning platform should offer forums, peer reviews, or mentorship. These features are incredibly helpful for Freelance Web Developers working independently.

Freelancing-Focused Courses

Apart from technical skills, you need to understand how to manage your freelance business.

1. Freelancing 101 (by And Co)

This free course includes tips on setting rates, handling contracts, and finding clients—perfect for a Freelance Website Designer.

2. Skillshare – Building a Freelance Web Design Business

Tailored for Freelance Web Designer Singapore professionals, this course dives into client management, branding, and pricing models.

Certifications That Add Value in Singapore

In Singapore, credentials matter. Here are some certifications that boost your resume:

Google UX Design Certificate

W3C Front-End Developer Certificate

AWS Certified Cloud Practitioner

Meta Front-End Developer Certificate

Adobe Certified Professional – Web Authoring

These are valuable whether you're a Website Developer Singapore or a Freelance Website Designer Singapore offering services to corporations or startups.

Career Paths After Taking Courses

Once you've completed one or more of these courses, you’ll be equipped to take on various roles:

Freelance Web Developer for small businesses

Freelance Website Designer Singapore specializing in e-commerce

Web Developer Singapore offering full-stack solutions

Website Designer Singapore focusing on branding and UI/UX

The key is to continue learning and updating your portfolio. The more you apply your skills in real projects, the more you grow.

Final Thoughts

Freelance web development is one of the most rewarding career paths in the digital era. The right courses not only teach you how to code but also how to think critically, solve problems, and manage clients.

Whether you're a complete beginner or looking to specialize further as a Freelance Web Designer, Freelance Website Developer, or Web Designer Singapore, there's a course out there that fits your needs.

As competition grows in markets like web design Singapore, having relevant certifications and up-to-date skills is what sets successful freelancers apart.

Invest in yourself. Learn, build, and grow. The journey to becoming a top-tier Freelance Web Developer Singapore or Website Developer Singapore starts with the right education.Visit https://www.freelancewebdesigner.sg to learn on Website development in Singapore.

#freelance web designer singapore #web design singapore #web designer singapore #website developer singapore #web developer singapore #website designer singapore

0 notes

josephkdavis · 19 hours ago

Text

Tried Every Major AI Model for Frontend Coding Only One Truly Delivered.

Let’s face it. As web developers, we’re all chasing the dream of faster, smarter, and more efficient coding. After all, the clock’s ticking, and there’s always more to build. Enter AI. You’ve probably heard all the buzz—AI tools that promise to help us write code faster, debug smarter, and even suggest better practices.

So, I did what any curious developer would do: I tested every major AI model for frontend coding. The verdict? Only one truly delivered. Spoiler alert: it wasn’t the one you might expect.

Let’s break it down.

The AI Hustle: The Tools I Tested GitHub Copilot – The AI-powered sidekick that lives inside Visual Studio Code, claiming to write code for you based on context.

ChatGPT – The famous conversational AI that answers all your questions and generates code snippets on demand.

Tabnine – The autocomplete tool that promises to help you code faster by suggesting relevant code as you type.

Kite – More of a Python fan favorite, but I thought I’d give it a shot for frontend tasks.

IntelliCode (Visual Studio) – Microsoft’s answer to AI code suggestions, integrated right into Visual Studio.

GitHub Copilot: Feels Like Magic—Until It’s Not At first, GitHub Copilot felt like something straight out of a developer’s dreams. You start typing, and bam—there it is: a perfectly crafted function, just like you wanted. For straightforward tasks like creating forms, loops, or boilerplate code? Copilot is on fire.

But… here’s the kicker:

The Caveat: When things got more complex—like building dynamic React components, handling state, or trying to integrate with APIs—Copilot just couldn’t keep up. It would suggest solutions that didn’t align with my project’s unique needs.

Code Quality: While the code worked, I often found myself rewriting it. It wasn’t exactly best practice material.

Don’t get me wrong—if you're cranking out basic pages or static HTML, Copilot is your friend. But for anything more nuanced? Not so much.

ChatGPT: Close, But Missing the Magic Touch I was honestly pretty pumped to try ChatGPT for frontend coding. It could explain things, generate code snippets, and even walk me through complex concepts. Plus, it was fast. But… as much as I loved it for learning and brainstorming, there were some glaring problems:

The “Old-School” Problem: Sometimes, ChatGPT would suggest outdated methods or libraries that were no longer considered best practice. So while it was fast, it wasn’t always on the cutting edge.

Context? What’s That?: ChatGPT is fantastic at answering questions, but it’s like that friend who has one really good idea and sticks to it. If you’re trying to build something specific, like a responsive navbar with flexbox and media queries, it often needed a bit of extra clarification from me.

Here’s the thing: ChatGPT can absolutely help with quick fixes or answering questions about web development. But when I needed it to generate more complex, customized code? It wasn’t perfect.

Tabnine: Fast, But Feels Like Auto-Pilot Tabnine was the next tool I dove into. It’s designed to speed up your workflow by predicting what you want to write and giving you the perfect code snippet. When it worked, it was like a breath of fresh air.

The Speed Factor: For simple functions or repetitive CSS rules, Tabnine sped up my workflow dramatically.

The Problem: But the minute I started getting into custom JavaScript components or more involved frontend logic, Tabnine became… well, a bit too generic. It felt like I was getting the same suggestions over and over. The more unique or specific the task, the more irrelevant the suggestions became.

So yeah, Tabnine is great when you’re doing basic stuff. But when you need it to adapt to your project’s unique context? Not so much.

Kite: More Python, Less Frontend Now, Kite is a popular AI assistant for Python developers. But hey, why not try it for frontend, right?

Turns out, that was a bad idea.

Wrong Fit for the Job: Kite’s suggestions were often off-track when it came to JavaScript, React, or even CSS. It’s not that it was a bad tool; it’s just not built for the frontend world.

Learning Curve: The lack of deep web development intelligence meant that Kite often gave me Python-flavored suggestions that weren’t very helpful.

If you're coding in Python, Kite’s your jam. But for frontend tasks? It felt like I was trying to put a square peg in a round hole.

IntelliCode (Visual Studio): A Little Too C#-Centric IntelliCode is another tool that’s integrated into Visual Studio. It’s solid—if you’re a C# developer. But I was working with JavaScript and React. Here’s how it went down:

Solid, But Static: IntelliCode tried to help, but it mostly focused on C# coding patterns. When it did suggest something for JavaScript, it felt like it was trying to adapt to a framework it didn’t really understand.

Not Frontend-Friendly: The AI behind IntelliCode just didn’t seem to “get” the way frontend development works, especially with React or complex HTML/CSS layouts.

If you’re in the Microsoft ecosystem, IntelliCode will help, but it won’t make you a frontend wizard.

And the Winner Is… ChatGPT (With a Twist) Here’s the plot twist: ChatGPT came out on top.

But before you roll your eyes, let me explain.

Here’s Why ChatGPT Works:

It’s Flexible: ChatGPT adapts to your needs. Whether I needed help with React state management, CSS animations, or even troubleshooting a weird bug, ChatGPT could jump in and help.

It Explains, Don’t Just Autocomplete: The real beauty of ChatGPT is that it doesn’t just give you code—it explains it. I could ask it to explain the difference between useEffect and useLayoutEffect, and it would break it down for me.

Context-Aware: While it still has room to improve, ChatGPT is surprisingly good at understanding your project’s flow, especially if you’re clear about what you need.

Pro Tip: Don’t rely on ChatGPT to write your code from start to finish. Treat it like a coding assistant—ask for help when you’re stuck or need a quick answer, then tweak the code to make it your own.

Final Thoughts: AI Isn’t Here to Replace Developers (Yet) It’s clear that AI tools aren’t perfect—yet. GitHub Copilot speeds up basic coding, Tabnine is great for fast suggestions, and IntelliCode can help if you’re in the Microsoft world. But for frontend development, ChatGPT emerged as the true game-changer.

The secret? ChatGPT is not just a code generator—it’s a powerful assistant that can teach you, help you troubleshoot, and give you contextual advice. It can’t replace your creativity or problem-solving skills, but it can certainly amplify them.

So, what’s the takeaway here? If you’re serious about AI tools for frontend development, ChatGPT is your best bet. Embrace it, and let it be the sidekick you always wished for.

#ai model #artificial intelligence

0 notes